<template>
  <Card style="width:850px;margin: auto;">
    <Form :model="formLeft" label-position="left"  :label-width="100" style="width: 300px;margin: auto;">

      <FormItem label="订单号:" prop="orderNo">
        <Input v-model="formLeft.orderNo" :maxlength="20" disabled></Input>
      </FormItem>

      <FormItem label="产品名称">
        <Select v-model="formLeft.productName" :disabled="isdisabledFn" >
          <Option v-for="item in productList"  :value="item.name">{{ item.name }}</Option>
        </Select>
      </FormItem>

      <FormItem label="计划数量:" prop="planQuantity">
        <InputNumber v-model="formLeft.planQuantity" :maxlength="10" :disabled="isdisabledFn"  style="width: 200px"/>
      </FormItem>

      <FormItem label="实际生产数量:" prop="producedQuantity">
        <InputNumber v-model="formLeft.producedQuantity" :maxlength="10"  style="width: 200px"/>
      </FormItem>


      <FormItem label="计划日期" prop="startTime" style="width: 500px">
        <DatePicker type="date"
                    :disabled="isdisabledFn"
                    :value="formLeft.startTime"
                    @on-change="dateplanDate($event,'startTime')"
                    style="width: 200px">
        </DatePicker>
      </FormItem>

      <FormItem label="交货日期" prop="endTime" style="width: 500px">
        <DatePicker type="date"
                    :value="formLeft.endTime"
                    @on-change="datedeliverDate($event,'endTime')"
                    style="width: 200px">
        </DatePicker>
      </FormItem>


      <FormItem label="状态" prop="status">
        <Select v-model="formLeft.status" disabled>
          <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>

      <row type="flex" justify="center">
        <i-col span="20">

        </i-col>
        <i-col span="30">
          <Button type="primary" @click="OrderUpdateById">修改</Button>
          <Button type="success" style="margin-left: 160px" @click="back">返回</Button>
        </i-col>
      </row>

    </Form>
  </Card>
</template>

<script>
  import {OrderFindByOrderNo,OrderUpdateById,ProductFindAll} from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 1000,//pageSize:每页几条数据
        total: 0,
        productList:[],
        stateList:[
          {
            value: '0',
            label: '未开始'
          },
          {
            value: '1',
            label: '正在生产'
          },
          {
            value: '2',
            label: '已完成'
          }
        ],
        isdisabledFn:false,
        formLeft: {
          productName: '',
          orderNo: '',
          planQuantity: 0,
          producedQuantity:0,
          startTime: '',
          endTime: '',
          status:''
        },
      }
    },
    mounted() {
      const orderNoFlag = this.$route.query.orderNo;
      if(orderNoFlag){
        this.formLeft.orderNo = orderNoFlag;
        this.OrderFindByOrderNo();
        this.ProductFindAll();
      }

    },
    methods: {
      dateplanDate(value, key) {
        this.formLeft[key] = value
      },
      datedeliverDate(value, key) {
        this.formLeft[key] = value
      },
      datePickerSelect(value, key) {
        this.formLeft[key] = value
      },
      OrderUpdateById() {
        if (this.formLeft.productName !== null && this.formLeft.productName !== "") {
          if (this.formLeft.orderNo !== null && this.formLeft.orderNo !== "") {
            if (this.formLeft.planQuantity !== null && this.formLeft.planQuantity !== "") {
              if (this.formLeft.startTime !== null && this.formLeft.startTime !== "") {
                if (this.formLeft.endTime !== null && this.formLeft.endTime !== "") {
                    OrderUpdateById(this.formLeft).then(res => {
                      this.$Message.success("编辑成功");
                      this.$router.go(-1)
                    })
                } else {
                  this.$Message.error("交货日期不能为空");
                }
              } else {
                this.$Message.error("计划日期不能为空");
              }
            } else {
              this.$Message.error("数量不能为空");
            }
          } else {
            this.$Message.error("订单号不能为空");
          }
        } else {
          this.$Message.error("产品名称不能为空");
        }
      },
      ProductFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        ProductFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.productList = data.data.data.list;
             //  console.log(this.productList)
          }
        })
      },
      back(){
        this.$router.go(-1);
      },
      OrderFindByOrderNo(){
        var data =  {
          orderNo:this.formLeft.orderNo,
        }
        OrderFindByOrderNo(data).then(res => {
          //console.log( res.data.data)
          this.formLeft = res.data.data;
          if (this.formLeft.status =='0'){
            this.isdisabledFn=false;
          }else {
            this.isdisabledFn=true;
          }
        })
      }
    },

  }
</script>


